<template>
	<div class="container">
		<van-nav-bar
			fixed
			left-arrow
			@click-left="$router.back()"
			title="小智同学"
		></van-nav-bar>
		<div ref="box" class="chat-list">
			<div v-for="(item, index) in chatList" :key="index">
				<!-- 左侧是机器人小智 -->
				<div v-if="!item.isMe" class="chat-item left">
					<van-image
						fit="cover"
						round
						:src="require('../../assets/fat.webp')"
					/>
					<div class="chat-pao">{{ item.msg }}</div>
				</div>

				<!-- 右侧是当前用户 -->
				<div v-else class="chat-item right">
					<div class="chat-pao my">{{ item.msg }}</div>
					<van-image fit="cover" round :src="$store.state.userInfoObj.photo" />
				</div>
			</div>
		</div>
		<div class="reply-container van-hairline--top">
			<van-field
				v-model="inputVal"
				@keyup.enter="send"
				placeholder="说点什么..."
			>
				<span @click="send" slot="button" style="font-size: 12px; color: #999">
					提交
				</span>
			</van-field>
		</div>
	</div>
</template>

<script>
import io from "socket.io-client";
export default {
	name: "UserChat",
	data() {
		return {
			socket: null,
			inputVal: "", // 输入框内容
			chatList: [], // 保存聊天记录
		};
	},
	created() {
		// 调用一下获取用户资料
		this.$store.dispatch("getUserInfo");
		// 建立连接并监听服务器返回的消息
		this.connectIO();
	},
	destroyed() {
		// 销毁组件时，关闭连接
		this.socket.disconnect();
	},
	methods: {
		connectIO() {
			this.socket = io("http://toutiao.itheima.net", {
				query: {
					token: this.$store.state.userInfoObj.token,
				},
				transports: ["websocket"],
			});
			// 监听服务器返回的消息
			this.socket.on("message", (obj) => {
				this.chatList.push({
					msg: obj.msg,
					isMe: false, // 标记不是本人
				});
				// 让聊天区内容始终处于最新状态
				this.$nextTick(() => {
					this.$refs.box.scrollTop = this.$refs.box.scrollHeight;
				});
			});
		},
		send() {
			// 非空判断
			if (this.inputVal == "") return this.$toast("请输入聊天内容");
			// 发消息给服务器
			this.socket.emit("message", {
				msg: this.inputVal,
				timestamp: Date.now(),
			});
			// 加到数组显示到页面上
			this.chatList.push({
				msg: this.inputVal,
				isMe: true,
			});
			this.$nextTick(() => {
				this.$refs.box.scrollTop = this.$refs.box.scrollHeight;
			});
			this.inputVal = "";
		},
	},
};
</script>

<style lang="less" scoped>
.container {
	height: 100%;
	width: 100%;
	position: absolute;
	left: 0;
	top: 0;
	box-sizing: border-box;
	background: #fafafa;
	padding: 46px 0 50px 0;
	.chat-list {
		height: 100%;
		overflow-y: scroll;
		.chat-item {
			padding: 10px;
			.van-image {
				vertical-align: top;
				width: 40px;
				height: 40px;
			}
			.chat-pao {
				vertical-align: top;
				display: inline-block;
				max-width: 70%;
				min-height: 40px;
				line-height: 38px;
				border: 0.5px solid #c2d9ea;
				border-radius: 4px;
				position: relative;
				padding: 0 10px;
				background-color: #e0effb;
				word-break: break-all;
				font-size: 14px;
				color: #333;
				&::before {
					content: "";
					width: 10px;
					height: 10px;
					position: absolute;
					top: 12px;
					border-top: 0.5px solid #c2d9ea;
					border-right: 0.5px solid #c2d9ea;
					background: #e0effb;
				}
			}
			.chat-pao.my {
				background-color: #9eea6a;
				&::before {
					content: "";
					background: #9eea6a;
				}
			}
		}
	}
}
.chat-item.right {
	text-align: right;
	.chat-pao {
		margin-left: 0;
		margin-right: 15px;
		&::before {
			right: -6px;
			transform: rotate(45deg);
		}
	}
}
.chat-item.left {
	text-align: left;
	.chat-pao {
		margin-left: 15px;
		margin-right: 0;
		&::before {
			left: -5px;
			transform: rotate(-135deg);
		}
	}
}
.reply-container {
	position: fixed;
	left: 0;
	bottom: 0;
	height: 44px;
	width: 100%;
	background: #f5f5f5;
	z-index: 9999;
}
</style>